<!--操作-->
<nz-row>
  <button nz-button nzType="primary" (click)="appendImg()">新增贴纸</button>
  <button nz-button nzType="default">批量启用</button>
  <button nz-button nzType="primary" nzDanger>批量禁用</button>
</nz-row>
<!--过滤查询-->
<nz-row>
  <div class="searchItem">
    <label for="qName">贴纸</label>
    <input id="qName" nz-input placeholder="请输入贴纸编号或名称" [(ngModel)]="query.name"/>
  </div>
  <div class="searchItem">
    <label for="category">贴纸分类</label>
    <nz-select id="category"
               [nzMaxTagCount]="3"
               nzMode="multiple"
               nzPlaceHolder="请选择贴纸分类"
               [(ngModel)]="query.category"
    >
      <nz-option *ngFor="let category of queryCategoryOptions" [nzLabel]="category.name"
                 [nzValue]="category.id"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="qStatus">状态</label>
    <nz-select [(ngModel)]="query.status" id="qStatus" nzPlaceHolder="请选择状态">
      <nz-option nzLabel="全部" nzValue="-1"></nz-option>
      <nz-option nzLabel="无效" nzValue="0"></nz-option>
      <nz-option nzLabel="有效" nzValue="1"></nz-option>
      <nz-option nzLabel="下架" nzValue="2"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="date">创建日期</label>
    <nz-date-picker id="date" nzPlaceHolder="请选择日期" [(ngModel)]="query.date" nzFormat="yyyy-MM-dd"></nz-date-picker>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryTableList()">查询</button>
  </div>
</nz-row>
<!--表格-->
<nz-table
  #rowSelectionTable
  nzShowSizeChanger
  nzShowQuickJumper
  [nzData]="listOfData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="listOfData.total"
  [nzPageIndex]="listOfData.current"
  [nzPageSize]="listOfData.size"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th nzAlign="center">排序</th>
    <th nzAlign="center">名称</th>
    <th nzAlign="center">状态</th>
    <th nzAlign="center" nzWidth="250px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data;let index=index">
    <td nzAlign="center">{{ index + 1 }}</td>
    <td nzAlign="center">{{ data.name }}</td>
    <td nzAlign="center">{{ data.status }}</td>
    <td nzAlign="center" style="display: flex;flex-direction: row;justify-content: space-evenly">
      <a>上移</a>
      <a>下移</a>
      <a>禁用</a>
      <a (click)="edit(data)">编辑</a>
      <a style="color: red"
         nzPopconfirmPlacement="top"
         nz-popconfirm
         nzPopconfirmTitle="确认要删除该数据吗?"
         nzOkText="确认"
         nzCancelText="取消"
         (nzOnConfirm)="deleteRow(data.id)">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>
<!--模态框-->
<nz-modal [(nzVisible)]="modal.modalVisible" [nzTitle]="modal.isAdd?'添加贴纸':'编辑贴纸'" (nzOnCancel)="handleModalCancel()"
          (nzOnOk)="handleModalOk()">
  <ng-container *nzModalContent>
    <nz-row class="modalRow">
      <label for="modalName">名称:</label>
      <input id="modalName" nz-input placeholder="请输入分类名称" [(ngModel)]="form.name"/>
    </nz-row>
    <nz-row class="imgRow">
      <label for="modalImg"><span>*</span>贴纸:</label>
      <nz-upload
        id="modalImg"
        class="avatar-uploader"
        [(nzFileList)]="goodsDetailImg.fileList"
        nzListType="picture-card"
        [nzShowUploadList]="false"
        nzAccept="image/*"
        [nzCustomRequest]="customRequest"
        (nzChange)="handleChange($event,goodsDetailImg)"
      >
        <ng-container *ngIf="!goodsDetailImg.url">
          <!--      <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></i>-->
          <i class="upload-icon" nz-icon [nzType]="'plus'"></i>
        </ng-container>
        <img *ngIf="goodsDetailImg.url" [src]="goodsDetailImg.url" style="width: 100%;max-height: 128px"/>
      </nz-upload>
    </nz-row>
    <nz-row class="modalRow">
      <label for="modalCategory"><span>*</span>贴纸分类:</label>
      <nz-select id="modalCategory"
                 [nzMaxTagCount]="3"
                 nzMode="multiple"
                 nzPlaceHolder="请选择贴纸分类"
                 [(ngModel)]="query.category"
      >
        <nz-option *ngFor="let category of queryCategoryOptions" [nzLabel]="category.name"
                   [nzValue]="category.id"></nz-option>
      </nz-select>
    </nz-row>
    <nz-row class="modalRow">
      <label for="modalNo"><span>*</span>排序:</label>
      <input id="modalNo" type="number" nz-input placeholder="请输入序号" [(ngModel)]="form.no"/>
    </nz-row>
    <nz-row class="modalRow">
      <label for="modalStatus"><span>*</span>状态:</label>
      <nz-radio-group id="modalStatus" [(ngModel)]="form.status">
        <label nz-radio nzValue="1">启用</label>
        <label nz-radio nzValue="0">禁用</label>
      </nz-radio-group>
    </nz-row>
    <nz-row class="modalRow">
      <label for="modalRemark">备注:</label>
      <textarea id="modalRemark" nz-input placeholder="请输入备注" [(ngModel)]="form.remark"></textarea>
    </nz-row>
  </ng-container>
</nz-modal>
